<template>
  <el-popover
      placement="bottom"
      :width="300"
      trigger="click"
  >
    <template #default>
      <slot></slot>
    </template>
    <template #reference>
      <el-badge :value="value" :is-dot="isDot">
        <component :is="`el-icon-${toLine(icon)}`"></component>
      </el-badge>
    </template>
  </el-popover>
</template>

<script lang="ts" setup>
import {toLine} from "../../../utils";

let props = defineProps({
  icon: {
    type: String,
    default: 'Bell'
  },
  value: {
    type: [Number, String],
    default: 0
  },
  isDot: {
    type: Boolean,
    default: false
  }
})
</script>

<style lang="scss" scoped>
.el-badge {
  cursor: pointer;
}
svg{
  width: 1em;
  height: 1em;
}
</style>